<template>
  <van-cell @click="showPopup">展示弹出层</van-cell>
  <van-popup class="tan" v-model:show="show">
    <div class="tanchu">
      <img src="../assets/tanchu.png" alt="" />
    </div>
    <div>
      <p class="zi">暂无DM开此本，先看看其他的吧</p>
      <p class="zi1">更多精彩房间</p>
    </div>
    <div class="dengfang">
      <div class="zuixia">
        <img class="zuixia1" src="../assets/tanchu1.png" alt="" />
      </div>
      <div class="you">
        <p class="hu">赤狐书生之佛狸祠下</p>
        <img class="fang" src="../assets/images/details/fang.png" alt="" /><span
          class="num"
          >3105597</span
        ><span class="deng">等1人</span>
        <p class="ming">DM：潇潇</p>
        <img class="zhuan" src="../assets/images/details/qwert.png" alt="" />
        <span class="zhuan1">45/人</span>
      </div>
      <div></div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style>
html {
  font-size: 26.667vw;
}
.tan {
  width: 2.75rem;
  height: 2.9rem;
  background-color: #fff;
  border-radius: 0.1rem;
}
.tanchu img {
  width: 2rem;
  height: 1rem;
  margin-left: 0.33rem;
}
.zi {
  font-size: 0.13rem;
  text-align: center;
}
.zi1 {
  font-size: 0.11rem;
  margin-top: 0.11rem;
  margin-left: 0.1rem;
}
.dengfang {
  display: flex;
  width: 2.54rem;
  height: 0.9rem;
  /* background-color: rgba(255, 255, 0, 0.137); */
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  border-radius: 0.1rem;
  position: relative;
  border: rgb(177, 169, 169) 1px solid;
}
.zuixia1 {
  width: 0.58rem;
  height: 0.77rem;
  margin-bottom: 0.3rem;
  margin-left: 0.1rem;
}
.hu {
  font-size: 0.1rem;
  margin-top: 0.05rem;
  margin-left: 0.1rem;
}
.fang {
  position: absolute;
  margin-left: 0.08rem;
  margin-top: 0.1rem;
  width: 0.15rem;
  height: 0.15rem;
}
.num {
  font-size: 0.1rem;
  position: absolute;
  left: 1rem;
  margin-top: 0.1rem;
}
.deng {
  margin-top: 0.1rem;
  position: absolute;
  width: 0.4rem;
  height: 0.16rem;
  background-color: blanchedalmond;
  font-size: 0.1rem;
  left: 1.5rem;
  text-align: center;
  border-radius: 0.1rem;
}
.ming {
  position: absolute;
  font-size: 0.12rem;
  margin-top: 0.3rem;
  margin-left: 0.1rem;
}
.zhuan {
  position: absolute;
  width: 0.15rem;
  height: 0.15rem;
  left: 0.65rem;
  top: 0.7rem;
  margin-left: 0.1rem;
}
.zhuan1 {
  position: absolute;
  font-size: 0.1rem;
  left: 0.9rem;
  top: 0.7rem;
  margin-left: 0.1rem;
}
</style>
